import React from 'react'
import styles from './index.less'
import { useCanvasContext } from '@/store/hooks'
import Item from '@/components/lib/Item'
import InputColor from '@/components/lib/InputColor'
export default function EditCanvas() {
	const canvas = useCanvasContext()
	const { style } = canvas.getCanvas()
	const handleStyleChange = (e, { name, value }) => {
		canvas.updateCanvasStyle({ [name]: value })
	}
	return (
		<div className={styles.main}>
			<Item label="画布宽度(px)：">
				<input
					type="number"
					value={style.width}
					style={{ borderRadius: 4 }}
					onChange={e =>
						handleStyleChange(e, { name: 'width', value: e.target.value - 0 })
					}
				></input>
			</Item>
			<Item label="画布高度(px)：">
				<input
					type="number"
					value={style.height}
					style={{ borderRadius: 4 }}
					onChange={e =>
						handleStyleChange(e, { name: 'height', value: e.target.value - 0 })
					}
				></input>
			</Item>
			<Item label="背景图片(url)：">
				<input
					type="text"
					style={{ borderRadius: 4 }}
					value={style.backgroundImage}
					onChange={e =>
						handleStyleChange(e, {
							name: 'backgroundImage',
							value: e.target.value,
						})
					}
					placeholder="图片链接..."
				/>
			</Item>
			<Item label="背景颜色:">
				<InputColor
					color={style.backgroundColor}
					triangle="top"
					onChangeComplete={e =>
						handleStyleChange(e, {
							name: 'backgroundColor',
							value: `rgba(${Object.values(e.rgb).join(',')})`,
						})
					}
				></InputColor>
			</Item>
		</div>
	)
}
